<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
    <title>Forms Review</title>
  </head>
  <body>
    <section id="overlay">

      <p id="logo">Order your milktea!</p>
      <hr>
      <form action="submission.html" method="POST">
        <div>
          <label for="whatTea">你想要什么口味的奶茶？</label>
          <input type="text" id="whatTea" name="whatTea" required minlength="2" maxlength="20">
        </div>
        <div>
          <label for="numberOfTea">你要几杯？</label>
          <input type="number" id="numberOfTea" name="numberOfTea" required min="1" max="4">
        </div>
        <div>
          <label for="sugar">你需要的糖分？</label>
          <input type="range" id="sugar" min="1" max="5" name="sugar">
        </div>
        <div>
          <input type="checkbox" id="toppings1" value="iceCream">
          <label for="toppings1">冰淇淋</label>
          <input type="checkbox" id="toppings2" value="naigai">
          <label for="toppings2">奶盖</label>
          <input type="checkbox" id="toppings3" value="kekefen">
          <label for="toppings3">可可粉</label>
        </div>
        <div>
          <input type="radio" id="needIce1" name="needIce" value="yes">
          <label for="needIce1">yes</label>
          <input type="radio" id="needIce2" name="needIce" value="no">
          <label for="needIce2">no</label>
        </div>
        <div>
          <label for="jialiao">你需要加什么料？</label>
          <select id="jialiao" name="jiajiao">
            <option value="zhengzhu">珍珠</option>
            <option value="boba">波霸</option>
            <option value="buding">布丁</option>
          </select>
        </div>
        <div>
          <label for="guige">你需要什么规格？</label>
          <select id="guige" name="guige">
            <option value="xiaobei">小杯</option>
            <option value="zhongbei">中杯</option>
            <option value="dabei">大杯</option>
          </select>
        </div>
        <div>
          <label for="otherReq">您还有别的什么要求吗？</label>
          <textarea id="otherReq" name="otherReq"></textarea>
        </div>
        <div>
          <label for="telephone">您的联系方式？</label>
          <input type="telephone" name="telephone"  required pattern="[0-9]{11}">
        </div>

        <input type="submit">







      </form>
    </section>
  </body>
</html>